<template>
  <div class="check-modal">
    <CustomDialog :options="options" @beforeClose="handleClose" @confirm="handleConfirm">
      <div class="wrapper">
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          class="padding-lr-sm"
          :rules="rules"
          label-position="right"
          label-width="80px"
        >
          <el-form-item label="科室">
            <el-cascader
              placeholder="请选择科室"
              v-model="ruleForm.deptId"
              :options="departmentOptions"
              :props="deptProps"
              collapse-tags
              collapse-tags-tooltip
              clearable
              filterable
              :show-all-levels="false"
              class="custom-cascader"
            />
          </el-form-item>

          <el-form-item label="岗位" prop="postId">
            <el-select
              v-model="ruleForm.postId"
              class="all-width"
              placeholder="请选择岗位"
              clearable
            >
              <el-option
                v-for="(option, index) in positionList"
                :key="index"
                :label="option.name"
                :value="option.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="分类" prop="classification">
            <el-select
              v-model="ruleForm.classification"
              placeholder="请选择分类"
              clearable
              class="all-width"
            >
              <el-option
                v-for="(option, index) in cateList"
                :key="index"
                :label="option.label"
                :value="option.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="状态" prop="state">
            <el-select
              v-model="ruleForm.state"
              placeholder="请选择状态"
              clearable
              class="all-width"
            >
              <el-option
                v-for="(option, index) in recordStates"
                :key="index"
                :label="option.text"
                :value="option.code"
              ></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="创建时间" prop="createTime">
            <el-date-picker
              v-model="ruleForm.createTime"
              style="width: 240px"
              value-format="YYYY-MM-DD"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            ></el-date-picker>
          </el-form-item>

          <el-form-item label="标题" prop="title">
            <el-input v-model="ruleForm.title" placeholder="请输入标题" clearable></el-input>
          </el-form-item>
          <el-form-item label="创建人" prop="createName">
            <el-input v-model="ruleForm.createName" placeholder="请输入创建人" clearable></el-input>
          </el-form-item>
          <!--
          <el-form-item label="类型" prop="type">
            <el-input v-model="ruleForm.type" placeholder="请输入类型" clearable></el-input>
          </el-form-item> -->
        </el-form>
      </div>
    </CustomDialog>
  </div>
</template>

<script>
  import CustomDialog from '@/components/CustomDialog';
  import DeptSelector from '@/components/common/businessComponent/DeptSelector.vue';
  export default {
    name: 'CheckModal',
    components: { CustomDialog },
    props: {
      options: {
        type: Object,
        required: true,
        default() {
          return {
            width: 648,
            title: '审核',
            modal: false,
            visible: false,
            top: '30vh',
            cancelText: '取消',
            confirmText: '确定',
          };
        },
      },
      departmentOptions: {
        type: Array,
        default: () => [],
      },
      recordStates: {
        type: Array,
        default: () => [],
      },
      cateList: {
        type: Array,
        default: () => [],
      },
      positionList: {
        type: Array,
        default: () => [],
      },
    },
    emits: ['close', 'confirm'],
    watch: {
      'options.visible'(val) {
        if (val) {
          // this.resetForm();
        }
      },
    },
    data() {
      return {
        rules: {
          isPass: [{ required: true, message: '请选择是否通过', trigger: 'change' }],
          reason: [{ required: false, message: '请输入审核意见', trigger: 'blur' }],
        },
        ruleForm: {},
        deptProps: {
          label: 'name',
          value: 'id',
          children: 'children',
          expandTrigger: 'hover',
          checkStrictly: true,
          multiple: false,
        },
      };
    },
    mounted() {},

    methods: {
      handleClose() {
        this.$emit('close');
      },
      handleConfirm() {
        this.$refs.ruleFormRef.validate((valid) => {
          if (valid) {
            this.$emit('confirm', this.ruleForm);
          } else {
            return false;
          }
        });
      },
      resetForm() {
        this.$nextTick(() => {
          this.$refs.ruleFormRef.resetFields();
        });
      },
    },
  };
</script>

<style lang="scss" scoped>
  .wrapper {
    background: #fff;
    width: 100%;
    padding: 20px 20px 0;
    .select-all-width {
      width: 100%;
    }
  }
  .reason-title {
    color: rgba(0, 0, 0, 0.65);
    margin-top: 15px;
    margin-bottom: 4px;
    font-size: 14px;
    font-weight: 600;
  }
  .check-modal {
    :deep(.el-cascader) {
      width: 100%;
    }
  }
</style>
